﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色权限分配</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="../../../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../../static/css/font.css">
    <link rel="stylesheet" href="../../../static/css/weadmin.css">
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../../../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../lib/layui_extends/layui-xtree.js"></script>
</head>
<body>
    <form class="layui-form">
        <div class="weadmin-nav">
            <span class="layui-breadcrumb" style="visibility: visible;">
                <a href="#">首页</a><span lay-separator="">/</span>
                <a href="#">基础设置</a><span lay-separator="">/</span>
                <a><cite>角色权限分配</cite></a>
            </span>
            <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon" style="line-height:30px">ဂ</i>
            </a>
        </div>

        <div class="left-nav layui-container-left" style="display:none;">
            <div id="side-nav">
                <div class="layui-form">
                    <ul id="nav"></ul>
                </div>
            </div>
        </div>

        <div class="layui-row fluid-position">

            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header layui-bg-gray" style="text-align:right;"><a style="margin-right:300px;">选择菜单模块</a></div>
                    <div class="layui-card-body">
                        <div id="eleTree" lay-filter="eledata" style="text-align:left;margin-left:50%;"></div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md6" id="selectDatas">
                <div class="layui-card">
                    <div class="layui-card-header layui-bg-gray"><a style="margin-left:100px;">角色选择</a></div>
                    <div class="layui-card-body" id="deptList" >

                    </div>

                </div>
                <button type="button" class="layui-btn layui-btn-normal layui-container-left" style="margin-left:13.5%;" id="add"><i class="layui-icon">&#xe608;</i> 添加保存</button>
            </div>


        </div>
    </form>
    
    <script>
        ///部门 数据
        //var dataLeft = [
        //    { value: 1, title: "部门1" },
        //    { value: 2, title: "部门2" },
        //    { value: 3, title: "部门3" },
        //    { value: 4, title: "部门4" },

        //];
        var dataLeft = [];
        //加载 [赋值]获取数据  (选择树相关数据)
        var dataSelect =[{ title: '部门1', id: '1', children: [{ title: '子级1', id: '10' }, { title: '子级1_2', id: '100' }] },
        { title: '部门2', id: '2', children: [{ title: '子级2', id: '20' }] },
        { title: '部门3', id: '3', children: [{ title: '子级3', id: '30' }] },
        { title: '部门4', id: '4', children: [{ title: '子级4', id: '40' }] },
        { title: '部门5', id: '5', children: [{ title: '子级5', id: '50' }] }];
        var temp_TreeId_List = [];//列表中选择信息时   使用字段中的内容=>为其赋值,可以使用此字段保存
        var selectId = 0;//左侧选中该的id 
        layui.use(['table', 'jquery','transfer', 'layer', 'form', 'tree', 'util'], function () {
            var table = layui.table,
                $ = layui.jquery,
                layer = layui.layer,
                form = layui.form;
            var eleTree = layui.tree;
            function getDept()
            {
                for (var i = 0; i < dataLeft.length; i++) {
                    var item = dataLeft[i];
                    var eleHtml = "<div class=\"layui-input-block\"><input type=\"radio\" name=\"dept\" value=\""+item.value+"\" title=\""+item.title+"\" lay-filter=\"deptradio\" /></div>";
                    $("#deptList").append(eleHtml);
                }
            }
            getDept();
            form.render();
           
            var tempList = [];//存储所有选择的节点，初始化时需要先置空
            var RoleSet = [];//存储所有选择的节点，初始化时需要先置空，使用RoleSet
            function SetTextFromTree(v) {
                for (var i = 0; i < v.length; i++) {
                    var c = v[i];
                    //tempList.push({ AutoID: 0, RoleID: parseInt(selectId), ModID: c.id });
                    RoleSet.push({ AutoID: 0, RoleID: parseInt(selectId), ModID: c.id });

                    //temp_TreeId_List.push(c.id);
                    if (c.children != undefined) {
                        if (c.children.length > 0) {
                            SetTextFromTree(c.children);
                        }
                    }
                }
            }

            function setTree()//选择信息列表中 信息时 调用该方法  并为temp_TreeId_List赋值
            {
                eleTree.setChecked('eleTreeid', temp_TreeId_List);
            }
            var el_tree;
            function reload() {
                el_tree = eleTree.render({
                    elem: '#eleTree',
                    id: 'eleTreeid',
                    data: dataSelect,
                    expandOnClickNode: false,
                    highlightCurrent: true
                    , checkStrictly: true
                    , showCheckbox: true
                });
            }
            reload();
            function sortNumber(a, b) {
                return a - b
            }
            form.on('radio(deptradio)', function (data) {
                selectId = data.value;//左侧选择的id


                temp_TreeId_List = [];
                //获取角色对应的所有的权限模块ID,默认是有子节点时，选择父节点时会包含所有的子节点，所以需要只获取所有的子节点即可，
                //该控件在选择了子节点后，父节点会自动选中
                $.ajax({
                    url: ApiUrl + 'RoleSet/GetModuleID',
                    data: { "RoleID": selectId },
                    type: 'POST',
                    headers: {
                        "userid": JSON.parse(window.localStorage.getItem("authInfo")).UserId,
                        "signtoken": JSON.parse(window.localStorage.getItem("authInfo")).SignToken,
                    },
                    success: function (data) {
                        if (data.StatusCode == 200) {
                            if (data.Data == null) {

                            }
                            else {
                                $(data.Data).each(function (index, item) {
                                    //树结构 中选中项赋值
                                    temp_TreeId_List.push(item.ModID);
                                    //temp_TreeId_List = [Number(selectId)];//左侧选择的id 对应的菜单id  
                                });
                                temp_TreeId_List.reverse(temp_TreeId_List.sort(sortNumber));//排序，同时倒序显示，先选中子节点
                            }
                            reload();
                            setTree();
                        }
                        else if (data.StatusCode == 403) {
                            top.layer.alert(data.Info + ",请重新登录！", { closeBtn: 0 }, function () {
                                top.location.href = "http://" + top.location.host + "/login.html";
                            })
                        }
                        else {
                            layer.msg(data.Info);
                        }
                    }
                });

            }); 
              
            //查询遍历角色信息
            $.ajax({
                url: ApiUrl + "Role/Sel",
                type: 'POST',
                headers: {
                    "userid": JSON.parse(window.localStorage.getItem("authInfo")).UserId,
                    "signtoken": JSON.parse(window.localStorage.getItem("authInfo")).SignToken,
                },
                success: function (data) {
                    if (data.StatusCode == 200) {
                        dataLeft.splice(0, dataLeft.length);
                        $(data.Data).each(function (index, item) {
                            //var htmlmenu = "";
                            //htmlmenu += '<li id="' + item.RoleID + '">';
                            //htmlmenu += '<a href="javascript:;"><i class="iconfont">&#xe6b8;</i><cite>' + item.RoleName + '</cite></a>';
                            //htmlmenu += "</li>";
                            //$("#nav").append(htmlmenu);


                            dataLeft.push({value: item.RoleID , title: ''+item.RoleName+''});


                        });
                        console.log(dataLeft);

                        getDept();
                        form.render();
                    }
                    else if (data.StatusCode == 403) {
                        top.layer.alert(data.Info + ",请重新登录！", { closeBtn: 0 }, function () {
                            top.location.href = "http://" + top.location.host + "/login.html";
                        })
                    }
                    else {
                        layer.msg(data.Info);
                    }
                }
            });
            
            $.ajax({
                url: ApiUrl + "Module/SelTree",
                type: 'post',
                headers: {
                    "userid": JSON.parse(window.localStorage.authInfo).UserId,
                    "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                },
                success: function (data) {
                    if (data.StatusCode == 200) {
                        dataSelect = data.Data;
                        reload();
                    }
                    else if (data.StatusCode == 403) { 
                    }
                    else {
                        //layer.msg(data.Info);
                    }
                }
            });

            $("#add").click(function () {
                //alert("add");

                if (selectId == 0) {
                    layer.msg("请选择角色！");
                    return;
                }
                var checkData = eleTree.getChecked('eleTreeid');
                if (checkData.length == 0) {
                    layer.msg("请选择角色对应的模块！");
                    return;
                }

                //tempList.splice(0, tempList.length);//tempList 存储所有选中的节点，初始化时置空，功能与RoleSet一致
                RoleSet.splice(0, RoleSet.length);//tempList 存储所有选中的节点，初始化时置空
                SetTextFromTree(checkData);
                console.log(tempList);

                $.ajax({
                    url: ApiUrl + 'RoleSet/AddList',
                    type: 'POST',
                    data: { RoleSetList: RoleSet },
                    headers: {
                        "userid": JSON.parse(window.localStorage.authInfo).UserId,
                        "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                    },
                    success: function (data) {
                        if (data.StatusCode == 200) {
                            layer.msg("角色权限设置成功！");
                        }
                        else if (data.StatusCode == 403) {
                            layer.msg(data.Info);
                        }
                        else {
                            layer.msg(data.Info);
                        }
                    }
                });
            });

        });
    </script>
</body>
</html>
